<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ZHE BLOG | login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="/customize/config/websiteIcon.png"/>
        <link rel="stylesheet" href="/admin/dist/css/font-awesome.min.css">
        <link rel="stylesheet" href="/admin/dist/css/ionicons.min.css">
        <link rel="stylesheet" href="/admin/plugins/adminlte/adminlte.min.css">
        <link rel="stylesheet" href="/admin/dist/css/login.css"/>
    </head>
    <body class="hold-transition login-page">
        <!-- 动态生成登录页背景 -->
        <div id="particles"></div>
        <div class="login-box">
            <div class="login-logo">
                <h1>ZHE BLOG</h1>
            </div>
            <div class="card">
                <div class="card-body login-card-body">
                    <p class="login-box-msg">zhe blog enjoy it</p>
                    <form>
                        <p id="error-panel"></p>
                        <div class="form-group has-feedback">
                            <span class="fa fa-user form-control-feedback"></span>
                            <input type="text" id="userName" name="userName" class="form-control"
                                   placeholder="请输入账号"
                                   required="required"/>
                        </div>
                        <div class="form-group has-feedback">
                            <span class="fa fa-lock form-control-feedback"></span>
                            <input type="password" id="password" name="password" class="form-control"
                                   placeholder="请输入密码"
                                   required="required">
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <img title="单击图片刷新！" alt="单击重新加载验证码！" class="pointer"
                                     onclick="reload()" src="/captcha">
                            </div>
                            <div class="col-6">
                                <input type="text" class="form-control" name="verifyCode" placeholder="请输入验证码"
                                       required="required">
                            </div>
                        </div>
                        <div class="form-group has-feedback"></div>
                        <div class="row">
                            <div class="col-8"></div>
                            <div class="col-4">
                                <button type="button" class="btn btn-primary btn-block btn-flat">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
    <script src="/admin/plugins/jquery.min.js"></script>
    <script src="/admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/admin/plugins/particles.js"></script>
    <script src="/admin/plugins/login-bg-particles.js"></script>
    <script>
        function reload() {
            $("img").attr("src", '/captcha?d=' + new Date() * 1);
        }

        $(function () {
            $("button").click(function () {
                let userName = $("#userName").val();
                let password = $("#password").val();
                let verifyCode = $("[name=verifyCode]").val();
                $.ajax({
                    url: "/admin/login",
                    type: "post",
                    data: {
                        "userName": userName,
                        "password": password,
                        "verifyCode": verifyCode
                    },
                    dataType: "json",
                    success: function (response) {
                        let rCode = response.resultCode;
                        if (rCode === 200) {
                            location.href = "/admin/index.html";
                        } else {
                            $("#error-panel").html(response.message);
                        }
                    },
                    error: function (response) {
                        $("#error-panel").html(response.message);
                    }
                });
            });
        });
    </script>
</html>